<script setup>

import {EditPen, House, Notebook, Setting, User, Van} from "@element-plus/icons-vue";
import router from "@/router";
</script>

<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-aside width="200px" style="border-right: 1px solid #ccc">
        <div
            style="height: 55px;display: flex; justify-content: center; align-items: center;font-weight: bold; font-size: 24px">
          <el-icon style="margin-right: 3px"><Van /></el-icon>
          
        </div>
        <el-scrollbar class="menu" style="width: 100%; height: calc(100vh - 55px)">
          <el-menu
              default-active="0"
              class="el-menu-vertical-demo"
          >
            <el-menu-item index="0" @click="router.push('/index')">
              <template #title>
                <el-icon>
                  <House/>
                </el-icon>
                <span>首页</span>
              </template>
            </el-menu-item>

            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>城乡LRF占比</span>
              </template>
              <el-menu-item index="1-1" @click="router.push('/2007CXLRFDB')">2007城乡LRF对比</el-menu-item>
              <el-menu-item index="1-2" @click="router.push('/2012CXLRFDB')">2012年-城乡LRF对比</el-menu-item>
              <el-menu-item index="1-3" @click="router.push('/2012CXLRFDB_202404061520')">2012年-城乡LRF对比(新)</el-menu-item>
              <el-menu-item index="1-4" @click="router.push('/2017CXLRFDB')">2017年-城乡LRF对比</el-menu-item>
              <el-menu-item index="1-5" @click="router.push('/2022CXLRFDB')">2022年-城乡LRF对比</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Notebook/>
                </el-icon>
                <span>城乡人口对比</span>
              </template>
              <el-menu-item index="2-1" @click="router.push('/2007CXRKJG')">2007城乡人口结构</el-menu-item>
              <el-menu-item index="2-2" @click="router.push('/2012CXRKJG')">2012年-城乡人口结构</el-menu-item>
              <el-menu-item index="2-3" @click="router.push('/2017CXRKJG')">2017年-城乡人口结构</el-menu-item>
              <el-menu-item index="2-4" @click="router.push('/2022CXRKJG')">2022年-城乡人口结构</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <EditPen/>
                </el-icon>
                <span>人口数量</span>
              </template>
              <el-menu-item index="3-1" @click="router.push('/2007GSRKSL')">2007各市人口数量</el-menu-item>
              <el-menu-item index="3-2" @click="router.push('/2012GSRKSL')">2012年-各市人口数量</el-menu-item>
              <el-menu-item index="3-3" @click="router.push('/2017GSRKSL')">2017年-各市人口数量</el-menu-item>
              <el-menu-item index="3-4" @click="router.push('/2022GSRKSL')">2022年-各市人口数量</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <setting/>
                </el-icon>
                <span>LRF冷热点分析</span>
              </template>
              <el-menu-item index="4-1" @click="router.push('/2007RDFX')">2007年LRF冷热点分析</el-menu-item>
              <el-menu-item index="4-2" @click="router.push('/2012RDFX')">2012年-LRF冷热点分析</el-menu-item>
              <el-menu-item index="4-3" @click="router.push('/2017RDFX')">2017年LRF冷热点分析</el-menu-item>
              <el-menu-item index="4-4" @click="router.push('/2022RDFX')">2022年LRF冷热点分析</el-menu-item>
            </el-sub-menu>           

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <setting/>
                </el-icon>
                <span>各市人均LRF</span>
              </template>
              <el-menu-item index="5-1" @click="router.push('/2007RJLRF')">2007人均LRF</el-menu-item>
              <el-menu-item index="5-2" @click="router.push('/2012RJLRF')">2012年-人均LRF</el-menu-item>
              <el-menu-item index="5-3" @click="router.push('/2017RJLRF1')">2017年-人均LRF</el-menu-item>
              <el-menu-item index="5-4" @click="router.push('/2022RJLRF')">2022年-人均LRF</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>各市总LRF分级图</span>
              </template>
              <el-menu-item index="6-1" @click="router.push('/2007ZLRF')">2007总LRF</el-menu-item>
              <el-menu-item index="6-2" @click="router.push('/2012ZLRFmxd')">2012年-总LRF</el-menu-item>
              <el-menu-item index="6-3" @click="router.push('/2017ZLRF')">2017年-总LRF</el-menu-item>
              <el-menu-item index="6-4" @click="router.push('/2022ZLRF')">2022年-总LRF</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>农作物播种情况</span>
              </template>
              <el-menu-item index="7-1" @click="router.push('/BZMJ')">播种面积</el-menu-item>
              <el-menu-item index="7-2" @click="router.push('/BZQK')">播种情况</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="8">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>耕地面积</span>
              </template>
              <el-menu-item index="8-1" @click="router.push('/GSGDJG')">各市耕地结构</el-menu-item>
              <el-menu-item index="8-2" @click="router.push('/GSGDMJ')">各市耕地面积</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="9">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>饮食结构</span>
              </template>
              <el-menu-item index="9-1" @click="router.push('/CXRJSWXFL')">城乡人均食物消费量</el-menu-item>
              <el-menu-item index="9-2" @click="router.push('/CZDWXSWXFL')">城镇动物性食物消费量</el-menu-item>
              <el-menu-item index="9-3" @click="router.push('/CZDZWSWXFL')">城镇动植物食物消费量</el-menu-item>
              <el-menu-item index="9-4" @click="router.push('/CZZWXSWXFL')">城镇植物性食物消费量</el-menu-item>
              <el-menu-item index="9-5" @click="router.push('/NCDWXSWXFL')">农村动物性食物消费量</el-menu-item>
              <el-menu-item index="9-6" @click="router.push('/NCDZWSWXFL')">农村动植物食物消费量</el-menu-item>
              <el-menu-item index="9-7" @click="router.push('/NCZWXSWXFL')">农村植物性食物消费量</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="10">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>地区概况</span>
              </template>
              <el-menu-item index="10-1" @click="router.push('/HNS')">河南省</el-menu-item>
            </el-sub-menu>
            
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header style="height: 55px; border-bottom: 1px solid #ccc;display:flex; justify-content: space-around; align-items: center;">
          <div style="width: 80%; text-align: left; height: 55px;display:inline-flex; justify-content: flex-start; align-items: center;font-weight: bold; font-size: 24px">河南省居民饮食结构与土地利用时空信息展示系统</div>
          <div style="width: 20%; text-align: right;">
            <el-dropdown>
              <el-avatar style="width: 35px; height: 35px; margin-top: 10px"
                         src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item @click="router.push('/')">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main style="background-color: rgba(246, 249, 248)">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.menu :deep(.el-menu) {
  border-right: 0;
}
</style>